<template>
    <van-nav-bar
        title="我的订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <van-tabs v-model:active="active" @click-tab="onTab">
        <van-tab v-for="item of tarList" :title="item.title" :name="item.name" :key="item.name"></van-tab>
        <div class="list">
            <div class="item" v-for="item of OrderData" :key="item.id">
                <div class="header">
                    <div class="top">订单号：<span>{{item.code}}</span></div>
                    <div class="status">{{item.status_text}}</div>
                </div>
                <div class="product" v-for="val of item.OrderProduct" :key="val.id">
                    <van-card
                    :num="val.nums"
                    :price="val.total"
                    :desc="'商品单价'+val.price"
                    :title="val.product.name"
                    :thumb="val.product.cover_cdn"
                    >
                    </van-card>
                </div>
                <div class="footer">
                    <div class="date">{{item.createtime}}</div>
                    <div class="btn">
                        <van-button type="primary" size="mini" color="#7232dd" :to="{path:'/order/order/info',query:{orderid:item.id}}">订单详情</van-button>
                        <van-button type="primary" size="mini" v-if="item.status >= 1 && item.status <= 4">申请售后</van-button>
                        <van-button type="primary" size="mini" v-if="(item.status >= 2 && item.status <= 4) || item.status < 0">查看物流</van-button>
                        <van-button type="primary" size="mini" v-if="item.status == 2 ">确认收货</van-button>
                        <van-button type="primary" size="mini" v-if="item.status == 3">立即评价</van-button>
                        <van-button type="danger" size="mini" :to="{path:'/order/order/info',query:{addrid:item.id}}">删除订单</van-button>
                    </div>
                </div>
            </div>
        </div>
        
    </van-tabs>


</template>
<script>
export default {
    created() {
        this.OrderList()
    },
    data() {
        return {
            LoginUser:this.$cookies.get('LoginUser'),
            active:'0',
            OrderData:[],
            status:0,
            tarList:[
                {
                    title:'全部',
                    name:0
                },
                {
                    title:'已支付',
                    name:1
                },
                {
                    title:'已发货',
                    name:2
                },
                {
                    title:'已收货',
                    name:3
                },
                {
                    title:'已评价',
                    name:4
                },
                {
                    title:'申请退货',
                    name:-2
                },
                {
                    title:'已退货',
                    name:-1
                },
                {
                    title:'退货被拒',
                    name:-3
                },
            ]
        }
    },
    methods: {
        onClickLeft()
        {
            this.$router.push('/user/base/index')
        },
        async OrderList()
        {
            let data = {
                userid:this.LoginUser.id,
                addrid:this.id,
                status:this.status
            }
            let result = await this.$api.OrderIndex(data)

            if(result.code === 1)
            {
                this.OrderData = result.data
            }
        },
        onTab(item)
        {
            this.status = item.name
            this.OrderList()
        }
    },
}
</script>

<style>
    .list .item{
        width: 95%;
        background: #f7f8fa;
        margin: 1em auto;
        color:#323233;
        padding-top: 1px;
        padding-bottom: 1px;
        box-sizing: border-box;
    }

    .item .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
    }

    .item .header .status{
        margin: 10px 5px 5px 0;
    }

    .list .item .top{
        margin: 10px 0 5px 5px;
    }

    .item .top span{
        font-weight: bold;
        font-size: 15px;
    }

    .item .footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .item .footer .date{
        font-weight: bold;
    }
</style>